<script setup lang="ts">
import { ref, reactive, watch, h, type VNode } from 'vue'
import {
  NSpace,
  NForm,
  NFormItem,
  NInput,
  NSelect,
  NDatePicker,
  NButton,
  NScrollbar,
  NModal,
  useMessage,
  NSpin,
  NIcon,
  NTooltip,
  type SelectOption,
  type FormInst
} from 'naive-ui'
import router from '@/router'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import { ApprovalFilled, CloseFilled } from '@vicons/material'
import VBackImg from '@/assets/images/back.png'
import { ErrorRound } from '@vicons/material'
import VUpload from '@/views/OA/Common/Upload.vue'
import { subDays } from 'date-fns'
import { cardNumberRegex } from '@/enums/regex'
import VScope from '@/views/OA/Common/Scope.vue'

const tags = useTagStore().tags
const props = defineProps({
  title: { type: String, default: () => '报销申请' },
  id: { type: String, default: () => null },
  flag: { type: [Number, String], default: () => null }
})
const message = useMessage()
const formValue = reactive<Record<string, any>>({
  draft: null, //草稿状态
  entityId: null, //流程实体id
  reimburseType: null, //报销类型 0差旅 1合同 2其他 3公出
  primitiveId: null, //关联报销id
  errandName: null, //出差人

  // 输入框替换人员组件--------------
  scopeOrPeopleList: [], //发布范围*
  // 输入框替换人员组件--------------

  amount: null, //合计金额
  remark: null, //差旅事由
  accountName: null,
  openingBank: null,
  bankCardNumber: null,
  reimburseDetailList: [
    {
      id: 0,
      // 除差旅以外
      reimburseContent: null, //报销内容
      salary: null, //金额
      piece: null, //单据张数
      fileId: null, //附件
      // 差旅以外
      startTime: null, //起讫开始日期
      endTime: null, //起讫结束日期
      startAddress: null, //起讫开始地点
      endAddress: null, //起讫结束地点
      days: null, //天数
      vehicles: null, //交通工具
      vehiclesFee: null, //交通工具费用
      invoice: null, //住宿费的发票金额
      amount: null, //住宿费的金额
      boardExpenses: null, //伙食费
      sundryFee: null, //杂项费用
      others: null, //其他事项
      othersFee: null, //其他事项金额
      amountSum: null //合计金额
    }
  ]
})
const rules: any = ref({
  reimburseType: {
    required: true,
    message: '请选择报销类型',
    trigger: ['change', 'blur']
  },
  primitiveId: {
    required: true,
    trigger: ['change', 'select'],
    validator: (_: any, value: any) => {
      if (formValue.reimburseType != '3' && formValue.reimburseType != '5') {
        if (!value) return new Error('请选择关联')
        return true
      } else {
        if (!value?.length) return new Error('请选择关联')
        return true
      }
    }
  },
  cardType: {
    required: true,
    message: '请选择报销卡',
    trigger: ['change', 'select']
  },
  accountName: {
    required: true,
    trigger: ['input', 'change', 'blur'],
    validator: (_: any, value: any) => {
      if (!value || value?.length === 0) return new Error('请输入开户名')
      // if (value && value.length > 10) return new Error('开户名 字数不得超过10')
      return true
    }
  },
  openingBank: {
    required: true,
    trigger: ['input', 'change', 'blur'],
    validator: (_: any, value: any) => {
      if (!value || value?.length === 0) return new Error('请输入开户行')
      // if (value?.length > 100) return new Error('开户行 字数不得超过100')
      return true
    }
  },
  bankCardNumber: {
    required: true,
    trigger: ['input', 'change', 'blur'],
    validator: (_: any, value: any) => {
      if (value?.length === 0 || !value) return new Error('请输入银行卡号')
      // if(!cardNumberRegex.test(value)) {
      //   return new Error('银行卡格式有误，请重新输入')
      // }
      return true
    }
  }
})
const typeList = [
  {
    value: '3',
    label: '公出'
  },
  {
    value: '0',
    label: '差旅'
  },
  {
    value: '4',
    label: '接待'
  },
  {
    value: '1',
    label: '合同'
  },
  {
    value: '5',
    label: '劳务费'
  },
  {
    value: '2',
    label: '其他'
  }
]

const cardTypeList = [
  { value: '1', label: '我的公务卡' },
  { value: '2', label: '我的工资卡' },
  { value: '3', label: '其他' }
]
/** 改变报销卡的类型 */
const changeCardType = async (v: string) => {
  if (v != '3') {
    const [error, res] = await sendRequest({
      module: 'user',
      api: 'getUserBankInfo',
      uri: {
        cardType: v
      }
    })
    if (error || res.code !== 0) {
      return false
    }
    const { accountName, bankCardNumber, integrityFlag, openingBank } = res.data
    if (!integrityFlag) {
      message.warning(
        `无个人${v == '1' ? '公务卡' : '银行卡'}信息，请至个人信息页面维护${
          v == '1' ? '公务卡' : '银行卡'
        }信息或选择【其他】手动填写`
      )
      formValue.cardType = null
      formValue.accountName = null
      formValue.bankCardNumber = null
      formValue.openingBank = null
    } else {
      formValue.accountName = accountName
      formValue.bankCardNumber = bankCardNumber
      formValue.openingBank = openingBank
    }
  } else {
    formValue.accountName = null
    formValue.bankCardNumber = null
    formValue.openingBank = null
  }
}

//只输入正整数
const onlyIntNumber = (value: string) => {
  return !value || /^\d+$/.test(value)
}
//只能输入数字
const onlyFloatNumber = (value: string) => {
  var regA = /^\d*\.{0,1}\d{0,2}$/
  const tmp: any = value.split('')
  if (tmp[0] == 0 && tmp[1] == 0) return false
  return !value || regA.test(value)
}
//去除空格
const stopNull = (value: string) => {
  return !value.startsWith(' ') && !value.endsWith(' ')
}
// render创建select
const renderOption = ({ node, option }: { node: VNode; option: SelectOption }) =>
  h(
    NTooltip,
    {
      placement: 'left'
    },
    {
      trigger: () => node,
      default: () => option.key
    }
  )
// 获取关联
const AboutList: any = ref()
const getAbout = async (val: any) => {
  const [error, res] = await sendRequest({
    module: 'account',
    api: 'droplist',
    override: {
      params: {
        reimburseType: val
      }
    }
  })
  if (error) return
  if (res.code !== 0) return
  AboutList.value = res.data
}
// 获取流程id
const hint = ref()
const spinShow = ref(false)
const workFlowList = ref(' ')
const getWorkFlow = async (val: any) => {
  spinShow.value = true
  const [error, res] = await sendRequest({
    module: 'receiveOrDispatch',
    api: 'workFlow',
    override: {
      params: {
        functionCode: val
      }
    }
  })
  if (error) return
  if (res.code !== 0) return
  formValue.entityId = res.data.entityId
  hint.value = res.data.remark
  workFlowList.value = res.data.workFlowList?.length
    ? res.data.workFlowList?.map((it: any) => it).join(' → ')
    : null
  spinShow.value = false
}
getWorkFlow('A0548')
// 添加报销明细
const openScope = () => {
  formValue.reimburseDetailList.push({
    id: formValue.reimburseDetailList.length,
    reimburseContent: null, //报销内容
    salary: null, //金额
    piece: null, //单据张数
    fileId: null, //附件
    // 差旅以外
    startTime: null, //起讫开始日期
    endTime: null, //起讫结束日期
    startAddress: null, //起讫开始地点
    endAddress: null, //起讫结束地点
    days: null, //天数
    vehicles: null, //交通工具
    vehiclesFee: null, //交通工具费用
    invoice: null, //住宿费的发票金额
    amount: null, //住宿费的金额
    boardExpenses: null, //伙食费
    sundryFee: null, //杂项费用
    others: null, //其他事项
    othersFee: null, //其他事项金额
    amountSum: null //合计金额
  })
}
// 删除填入访客
const deleteUser = (val: any) => {
  formValue.reimburseDetailList.splice(val, 1)
}
// 报销类型选择
const changeType = (val: any) => {
  getAbout(val)
  formValue.primitiveId = null
  formValue.errandName = null
  formValue.remark = null
  formRef.value?.restoreValidation()
  formValue.reimburseDetailList = [
    {
      id: 0,
      reimburseContent: null, //报销内容
      salary: null, //金额
      piece: null, //单据张数
      fileId: null, //附件
      // 差旅以外
      startTime: null, //起讫开始日期
      endTime: null, //起讫结束日期
      startAddress: null, //起讫开始地点
      endAddress: null, //起讫结束地点
      days: null, //天数
      vehicles: null, //交通工具
      vehiclesFee: null, //交通工具费用
      invoice: null, //住宿费的发票金额
      amount: null, //住宿费的金额
      boardExpenses: null, //伙食费
      sundryFee: null, //杂项费用
      others: null, //其他事项
      othersFee: null, //其他事项金额
      amountSum: null //合计金额
    }
  ]
  formValue.openingBank = null
  formValue.accountName = null
  formValue.bankCardNumber = null
}
// 附件
const contentVisible = ref(false)
// 确定
const formRef = ref<FormInst | null>(null)
const contentContent = ref()
const confirm = (status: number) => {
  contentContent.value = status ? '您确定要保存草稿吗？' : ' 您确定要提交申请吗？'
  formRef.value?.validate(async (err) => {
    if (err) return
    contentVisible.value = true
    formValue.draft = status
  })
}
// 报销内容
const renderContentMessage = (_: any, value: any) => {
  if (!value) return Error('请输入报销内容')
  if (value?.length > 100) return new Error('报销内容不得超过100字')
  return true
}
// 金额必填
const renderMoneyMessage = (_: any, value: any) => {
  if (!value) return Error('请输入金额')
  if (value?.toString().trim() === '0') return Error('金额不能为0')
  return true
}
// 金额非必填
const renderMoneyMessageNoMust = (_: any, value: any) => {
  if (value?.toString().trim() === '0') return Error('金额不能为0')
  return true
}
// 单据张数
const renderPieceMessage = (_: any, value: any) => {
  if (!value) return Error('请输入单据张数')
  return true
}
//总金额
const renderMoneyAll = (_: any, value: any) => {
  if (value == '0') return Error('总金额不能为0')
  if (!value) return true
  if (!/^\d{1,9}(\.\d{1,2})?$/.test(String(value)))
    return new Error('金额整数位不能超过9位，小数位不能超过2位')
  return true
}
// 提交
const loading = ref(false)
const submit = async () => {
  loading.value = true
  const tmp = JSON.parse(JSON.stringify(formValue))
  tmp.errandName = JSON.stringify(tmp.scopeOrPeopleList) // 人员列表json保存
  delete tmp.scopeOrPeopleList // 剔除人员列表字段
  console.log('tmp: ', tmp)
  tmp.primitiveId = tmp.primitiveId?.join() || null
  if (props.id && !props.flag) {
    const [error, res] = await sendRequest({
      module: 'account',
      api: 'accountUpdate',
      override: {
        data: {
          ...tmp,
          id: props.id
        }
      }
    })
    if (error) return message.error(error.message), (loading.value = false)
    if (res.code !== 0) return message.error(res.msg), (loading.value = false)
    message.success(res.msg)
    goSubmit()
  } else {
    const [error, res] = await sendRequest({
      module: 'account',
      api: 'accountSave',
      override: {
        data: {
          ...tmp
        }
      }
    })
    if (error) return message.error(error.message), (loading.value = false)
    if (res.code !== 0) return message.error(res.msg), (loading.value = false)
    message.success(res.msg)
    goSubmit()
  }
  loading.value = false
  contentVisible.value = false
}
// 获取修改详情
const fileList: any = ref([])
const getInfo = async () => {
  const [error, res] = await sendRequest({
    module: 'account',
    api: 'accountItem',
    uri: {
      id: props.id
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  fileList.value = res.data.fileList
  formValue.amount = res.data.amount
  Object.keys(res.data).map((it: any) => {
    if (it === 'cardType') {
      formValue[it] = String(res.data[it]) // cardType  类型转换
    } else {
      // @ts-ignore
      formValue[it] = res.data[it]
    }
  })
  await getAbout(formValue.reimburseType)
  formValue.primitiveId = formValue.primitiveId.split(',')

  // 判断老数据不可解析情况--------------
  // 回显人员列表
  formValue.scopeOrPeopleList =
    typeof JSON.parse(res.data.errandName) == 'object' ? JSON.parse(res.data.errandName) : []
  // 判断老数据不可解析情况--------------
}
// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  tags.splice(index, 1)
  if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}
// 提交完跳转我的提交
const goSubmit = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  tags.splice(index, 1)
  if (formValue.draft) return router.push({ path: '/OA/UserCenter/Drafts' })
  router.push({ path: '/OA/UserCenter/Submit' })
}
// 计算天数
function getDaysBetweenDates(date1: any, date2: any) {
  const oneDay = 24 * 60 * 60 * 1000
  if (date1 && date2) {
    const firstDate = new Date(date1)
    const secondDate = new Date(date2)
    const diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / oneDay)) + 1
    return diffDays + ''
  } else {
    return '0'
  }
}
// 选择关联
const changePrimitiveId = (val: any, info: any) => {
  formValue.primitiveId = val
  formValue.remark = info[0].remark
}

// 输入框替换人员组件--------------
// 出差人
const scopeList = ref()
const modalVisible: any = ref(false)
const openScopeErrand = () => {
  scopeList.value = formValue.scopeOrPeopleList
  modalVisible.value = true
}

// 发布范围选择
const getScopeList = (v: any) => {
  console.log('v: ', v)
  formValue.scopeOrPeopleList = v
  modalVisible.value = false
}
// 范围选择是删除
const handleScope = (id: any) => {
  const index = formValue.scopeOrPeopleList.findIndex((it: any) => it.identifyingId == id)
  formValue.scopeOrPeopleList.splice(index, 1)
}
// 输入框替换人员组件--------------

watch(
  () => formValue.reimburseDetailList,
  async () => {
    if (formValue.reimburseType == '0') {
      if (formValue.reimburseDetailList.some((item: any) => item.amountSum)) {
        formValue.amount = formValue.reimburseDetailList.reduce((total: any, curr: any) => {
          return Number(total) + Number(curr.amountSum)
        }, 0)
      } else formValue.amount = 0
    } else {
      if (formValue.reimburseDetailList.some((item: any) => item.salary)) {
        formValue.amount = formValue.reimburseDetailList.reduce((total: any, curr: any) => {
          return Number(total) + Number(curr.salary)
        }, 0)
      } else formValue.amount = 0
    }
  },
  { deep: true, immediate: true }
)

watch(
  () => formValue.reimburseType,
  async () => {
    await getAbout(formValue.reimburseType)
  }
)

watch(
  () => formValue.reimburseType && formValue.amount,
  async () => {
    if (['1', '2', '3', '4', '5'].includes(formValue.reimburseType)) {
      if (formValue.amount < 10000) {
        await getWorkFlow('A0548')
      } else if (formValue.amount < 300000 && formValue.amount >= 10000) {
        await getWorkFlow('A0549')
      } else await getWorkFlow('A0550')
    } else await getWorkFlow('A0548')
  }
)

watch(
  () => props.id,
  () => {
    if (props.title == '报销申请编辑' && props.id) getInfo()
  },
  { deep: true, immediate: true }
)

watch(
  () => formValue,
  () => {
    formValue.reimburseDetailList.forEach((cur: any) => {
      cur.amountSum = parseFloat(
        (
          Number(cur.vehiclesFee) +
          Number(cur.amount) +
          Number(cur.boardExpenses) +
          Number(cur.sundryFee) +
          Number(cur.othersFee)
        ).toFixed(2)
      )
      cur.days = getDaysBetweenDates(cur.startTime, cur.endTime)
    })
  },
  { deep: true, immediate: true }
)
</script>

<template>
  <div class="main">
    <div class="topTitle">{{ props.title }}</div>
    <div class="form_content">
      <NScrollbar>
        <NSpin :show="spinShow">
          <div class="content">
            <div
              class="progressHint"
              v-if="hint"
            >
              <NIcon
                size="20"
                class="iconStyle"
              >
                <ErrorRound />
              </NIcon>
              <div
                style="white-space: pre-wrap"
                v-html="hint"
              ></div>
            </div>
            <div class="progress">
              <div style="display: flex; margin-right: 10px">
                <NIcon
                  :size="20"
                  class="iconStyle"
                >
                  <ApprovalFilled />
                </NIcon>
                <span>审批流程</span>
              </div>
              <span
                style="font-size: 18px; flex: 1"
                :style="{ color: !workFlowList ? 'red' : '#79bb92' }"
              >
                {{ workFlowList ? workFlowList : '暂无配置流程，请联系管理员进行配置' }}
              </span>
            </div>

            <div class="content_cen">
              <NForm
                ref="formRef"
                require-mark-placement="left"
                label-placement="left"
                :rules="rules"
                :label-width="120"
                :model="formValue"
                style="width: 425px"
                label-align="right"
              >
                <NSpace style="display: flex; flex-direction: column">
                  <NFormItem
                    label="总金额(元):"
                    path="amount"
                    label-style="font-size: 20px;
                  font-weight: boldest;
                  height: 34px;
                  line-height: 34px;"
                    :rule="{
                    key: 'amount',
                    trigger: ['change'],
                    validator: (_: any, value: any) => renderMoneyAll(_, value)
                  }"
                  >
                    <div class="valueStyle">{{ formValue.amount }}</div>
                  </NFormItem>
                  <NFormItem
                    label="报销类型:"
                    path="reimburseType"
                  >
                    <NSelect
                      :options="typeList"
                      placeholder="请选择报销类型"
                      clearable
                      class="commonWidthB"
                      v-model:value="formValue.reimburseType"
                      :on-update-value="changeType"
                    />
                  </NFormItem>
                  <NFormItem
                    label="选择关联:"
                    path="primitiveId"
                    v-if="formValue.reimburseType != '2'"
                  >
                    <NSelect
                      :options="AboutList"
                      placeholder="请选择关联"
                      clearable
                      class="commonWidthB"
                      v-model:value="formValue.primitiveId"
                      label-field="key"
                      value-field="value"
                      :render-option="renderOption"
                      multiple
                      @update-value="changePrimitiveId"
                    />
                  </NFormItem>
                  <NFormItem
                    label="出差人:"
                    path="errandName"
                    v-if="formValue.reimburseType == '3' || formValue.reimburseType == '0'"
                  >
                    <!-- <NInput placeholder="请输入出差人" :allow-input="stopNull" class="commonWidthB"
                      v-model:value="formValue.errandName" clearable /> -->
                    <div style="width: 100%">
                      <NButton
                        style="width: 115px; margin-bottom: 15px"
                        type="primary"
                        @click="openScopeErrand"
                        ghost
                      >
                        选择同伴
                      </NButton>
                      <div
                        style="
                          width: 100%;
                          overflow: hidden;
                          height: 120rem;
                          background-color: #e1e1e1;
                          padding: 10px 15px;
                        "
                        v-if="formValue.scopeOrPeopleList?.length"
                      >
                        <NScrollbar>
                          <div class="scope">
                            <div
                              class="userBox"
                              v-for="(item, index) in formValue.scopeOrPeopleList"
                              :key="index"
                            >
                              <div>{{ item.typeName }}</div>
                              <n-icon
                                @click="handleScope(item.identifyingId)"
                                style="cursor: pointer"
                              >
                                <CloseFilled />
                              </n-icon>
                            </div>
                          </div>
                        </NScrollbar>
                      </div>
                    </div>
                  </NFormItem>
                  <NFormItem
                    label="事由:"
                    path="remark"
                    v-if="formValue.reimburseType == '0' && formValue.primitiveId"
                  >
                    <NInput
                      placeholder="请输入事由"
                      :allow-input="stopNull"
                      class="commonWidthB"
                      v-model:value="formValue.remark"
                      clearable
                      type="textarea"
                    />
                  </NFormItem>
                  <template v-if="formValue.reimburseType !== '5'">
                    <NFormItem
                      label="选择报销卡:"
                      path="cardType"
                    >
                      <NSelect
                        :options="cardTypeList"
                        placeholder="请选择报销卡"
                        clearable
                        class="commonWidthB"
                        v-model:value="formValue.cardType"
                        label-field="label"
                        value-field="value"
                        @update-value="changeCardType"
                      />
                    </NFormItem>
                    <NFormItem
                      label="开户行:"
                      path="openingBank"
                    >
                      <NInput
                        placeholder="请输入开户行"
                        :allow-input="stopNull"
                        class="commonWidthB"
                        v-model:value="formValue.openingBank"
                        clearable
                        :disabled="formValue.cardType !== '3'"
                      />
                    </NFormItem>
                    <NFormItem
                      label="银行卡号:"
                      path="bankCardNumber"
                    >
                      <NInput
                        placeholder="请输入银行卡号"
                        :allow-input="stopNull"
                        class="commonWidthB"
                        v-model:value="formValue.bankCardNumber"
                        clearable
                        :disabled="formValue.cardType !== '3'"
                      />
                    </NFormItem>
                    <NFormItem
                      label="开户名:"
                      path="accountName"
                    >
                      <NInput
                        placeholder="请输入开户名"
                        :allow-input="stopNull"
                        class="commonWidthB"
                        v-model:value="formValue.accountName"
                        clearable
                        :disabled="formValue.cardType !== '3'"
                      />
                    </NFormItem>
                  </template>
                  <div style="width: 100%">
                    <NButton
                      style="width: 120px; margin-bottom: 10px; margin-left: 120px"
                      type="primary"
                      @click="openScope"
                      ghost
                    >
                      添加报销明细
                    </NButton>
                  </div>
                </NSpace>

                <!-- 剩余的报销明细 -->
                <div
                  style="display: flex"
                  v-for="(item, index) in formValue.reimburseDetailList"
                  :key="index"
                  v-if="formValue.reimburseType != '0'"
                >
                  <div style="display: flex; flex-direction: row; align-items: center">
                    <div style="width: 95%">
                      <NSpace>
                        <div class="titleStyle"></div>
                        <NFormItem
                          :label="`报销明细${index + 1}`"
                          :show-feedback="false"
                          label-style="font-size: 18px;
                  font-weight: 700;
                  height: 34px;
                  font-family: PingFangSC, PingFang SC;
                  line-height: 34px;"
                        >
                          <div style="width: 240px"></div>
                        </NFormItem>
                        <NFormItem
                          label="报销内容:"
                          :path="'reimburseDetailList[' + index + '].reimburseContent'"
                          :rule="{
                          required: true,
                          trigger: ['input', 'blur'],
                          validator: (_: any, value: any) => renderContentMessage(_, value)
                        }"
                        >
                          <NInput
                            placeholder="请输入"
                            :allow-input="stopNull"
                            class="commonWidthB"
                            v-model:value="item.reimburseContent"
                            clearable
                          />
                        </NFormItem>
                        <NFormItem
                          label="金额(元):"
                          :path="'reimburseDetailList[' + index + '].salary'"
                          :rule="{
                          required: true,
                          trigger: ['blur', 'input'],
                          validator: (_: any, value: any) => renderMoneyMessage(_, value)
                        }"
                        >
                          <NInput
                            placeholder="请输入"
                            :allow-input="onlyFloatNumber"
                            class="commonWidthB"
                            v-model:value="item.salary"
                            clearable
                          />
                        </NFormItem>
                        <NFormItem
                          label="单据张数:"
                          :path="'reimburseDetailList[' + index + '].piece'"
                          :rule="{
                          required: true,
                          trigger: ['input', 'blur'],
                          validator: (_: any, value: any) => renderPieceMessage(_, value)
                        }"
                        >
                          <NInput
                            placeholder="请输入单据张数"
                            class="commonWidthB"
                            v-model:value="item.piece"
                            clearable
                            :allow-input="onlyIntNumber"
                          />
                        </NFormItem>
                        <NFormItem
                          label="附件:"
                          :path="'reimburseDetailList[' + index + '].fileId'"
                          :rule="{
                            required: true,
                            message: '请上传附件',
                            trigger: ['change', 'blur']
                          }"
                        >
                          <VUpload
                            :file-list="item.fileList"
                            @getList="(e) => (formValue.reimburseDetailList[index].fileId = e)"
                          />
                        </NFormItem>
                      </NSpace>
                    </div>
                    <div style="width: 5%; margin-left: 5px">
                      <NButton
                        circle
                        type="error"
                        v-if="formValue.reimburseDetailList.length > 1"
                        size="tiny"
                        @click="deleteUser(index)"
                      >
                        <div style="height: 34px; line-height: 34px">—</div>
                      </NButton>
                    </div>
                  </div>
                </div>

                <!-- 差旅报销明细 -->
                <div
                  style="display: flex; flex-wrap: wrap"
                  v-for="(item, index) in formValue.reimburseDetailList"
                  :key="index"
                  v-if="formValue.reimburseType == '0'"
                >
                  <div style="display: flex; flex-direction: row; align-items: center">
                    <div style="width: 95%">
                      <NSpace>
                        <div class="titleStyle"></div>
                        <NFormItem
                          :label="`报销明细${index + 1}`"
                          :show-feedback="false"
                          label-style="font-size: 16px;
                                font-weight: bolder;
                                height: 34px;
                                line-height: 34px;"
                        >
                          <div style="width: 240px"></div>
                        </NFormItem>
                      </NSpace>

                      <NFormItem label="起讫日期:">
                        <div style="display: flex; justify-content: space-between; width: 100%">
                          <div style="display: flex; flex-wrap: wrap">
                            <div style="display: flex; justify-content: space-between; width: 100%">
                              <NFormItem
                                :path="`reimburseDetailList[${index}].startTime`"
                                :show-feedback="false"
                                :rule="{
                                  required: false,
                                  trigger: ['input', 'blur']
                                }"
                              >
                                <NDatePicker
                                  input-readonly
                                  placeholder="开始时间"
                                  v-model:formatted-value="item.startTime"
                                  type="date"
                                  clearable
                                  class="commonWidthA"
                                  :is-date-disabled="(ts: any) => {
                                    if (item.endTime) {
                                      return ts > new Date(new Date(item.endTime))
                                    } else {
                                      return false
                                    }
                                  }"
                                />
                              </NFormItem>
                              <div style="height: 34px; line-height: 34px; margin: 0 5px">至</div>
                              <NFormItem
                                :path="`reimburseDetailList[${index}].endTime`"
                                :show-feedback="false"
                                :rule="{
                                  required: false,
                                  trigger: ['input', 'blur']
                                }"
                              >
                                <NDatePicker
                                  input-readonly
                                  placeholder="结束时间"
                                  v-model:formatted-value="item.endTime"
                                  type="date"
                                  clearable
                                  class="commonWidthA"
                                  :is-date-disabled="(ts: any) => ts < new Date(subDays(new Date(item.startTime), 1))"
                                />
                              </NFormItem>
                            </div>
                          </div>
                        </div>
                      </NFormItem>

                      <NFormItem label="起讫地点:">
                        <div style="display: flex; justify-content: space-between; width: 100%">
                          <NFormItem
                            :path="`reimburseDetailList[${index}].startAddress`"
                            :show-feedback="false"
                            :rule="{
                              required: false,
                              trigger: ['input', 'blur']
                            }"
                          >
                            <NInput
                              :allow-input="stopNull"
                              placeholder="出发地"
                              class="commonWidthB"
                              v-model:value="item.startAddress"
                            />
                          </NFormItem>
                          <div style="height: 34px; line-height: 34px; margin: 0 5px">至</div>
                          <NFormItem
                            :path="`reimburseDetailList[${index}].endAddress`"
                            :show-feedback="false"
                            :rule="{
                              required: false,
                              trigger: ['input', 'blur']
                            }"
                          >
                            <NInput
                              :allow-input="stopNull"
                              placeholder="目的地"
                              class="commonWidthB"
                              v-model:value="item.endAddress"
                            />
                          </NFormItem>
                        </div>
                      </NFormItem>

                      <NFormItem
                        label="天数："
                        :path="`reimburseDetailList[${index}].days`"
                        :rule="{
                          required: false,
                          trigger: ['input', 'blur']
                        }"
                      >
                        <NInput
                          :allow-input="stopNull"
                          placeholder="天数"
                          class="commonWidth"
                          v-model:value="item.days"
                          :disabled="true"
                        />
                      </NFormItem>

                      <NFormItem
                        label="交通费 "
                        :show-feedback="false"
                        label-style="font-size: 20px;
                      font-weight: boldest;
                      height: 34px;
                      line-height: 34px;"
                        style="margin-left: -10px"
                      >
                        <div style="width: 240px"></div>
                      </NFormItem>

                      <NFormItem
                        label="交通工具："
                        :path="`reimburseDetailList[${index}].vehicles`"
                        :rule="{
                          required: false,
                          trigger: ['input', 'blur']
                        }"
                      >
                        <NInput
                          :allow-input="stopNull"
                          placeholder="交通工具"
                          class="commonWidth"
                          v-model:value="item.vehicles"
                        />
                      </NFormItem>

                      <NFormItem
                        label="金额(元)："
                        :path="`reimburseDetailList[${index}].vehiclesFee`"
                        :rule="{
                        required: false,
                        trigger: ['input', 'blur'],
                        validator: (_: any, value: any) => renderMoneyMessageNoMust(_, value)
                      }"
                      >
                        <NInput
                          :allow-input="onlyFloatNumber"
                          placeholder="交通费金额"
                          class="commonWidth"
                          v-model:value="item.vehiclesFee"
                        />
                      </NFormItem>

                      <NFormItem
                        label="住宿费"
                        :show-feedback="false"
                        label-style="font-size: 20px;
                      font-weight: boldest;
                      height: 34px;
                      line-height: 34px;"
                        style="margin-left: -10px"
                      >
                        <div style="width: 240px"></div>
                      </NFormItem>

                      <NFormItem
                        label="发票金额(元)："
                        :path="`reimburseDetailList[${index}].invoice`"
                        :rule="{
                        required: false,
                        trigger: ['input', 'blur'],
                        validator: (_: any, value: any) => renderMoneyMessageNoMust(_, value)
                      }"
                      >
                        <NInput
                          :allow-input="onlyFloatNumber"
                          placeholder="住宿费的发票金额"
                          class="commonWidth"
                          v-model:value="item.invoice"
                        />
                      </NFormItem>

                      <NFormItem
                        label="金额(元)："
                        :path="`reimburseDetailList[${index}].amount`"
                        :rule="{
                        required: false,
                        trigger: ['input', 'blur'],
                        validator: (_: any, value: any) => renderMoneyMessageNoMust(_, value)
                      }"
                      >
                        <NInput
                          :allow-input="onlyFloatNumber"
                          placeholder="住宿费金额"
                          class="commonWidth"
                          v-model:value="item.amount"
                        />
                      </NFormItem>

                      <NFormItem
                        label="伙食费"
                        :show-feedback="false"
                        label-style="font-size: 20px;
                      font-weight: boldest;
                      height: 34px;
                      line-height: 34px;"
                        style="margin-left: -10px"
                      >
                        <div style="width: 240px"></div>
                      </NFormItem>

                      <NFormItem
                        label="伙食费(元)："
                        :path="`reimburseDetailList[${index}].boardExpenses`"
                        :rule="{
                        required: false,
                        trigger: ['input', 'blur'],
                        validator: (_: any, value: any) => renderMoneyMessageNoMust(_, value)
                      }"
                      >
                        <NInput
                          :allow-input="onlyFloatNumber"
                          placeholder="伙食费"
                          class="commonWidth"
                          v-model:value="item.boardExpenses"
                        />
                      </NFormItem>

                      <NFormItem
                        label="杂项"
                        :show-feedback="false"
                        label-style="font-size: 20px;
                      font-weight: boldest;
                      height: 34px;
                      line-height: 34px;"
                        style="margin-left: -10px"
                      >
                        <div style="width: 240px"></div>
                      </NFormItem>

                      <NFormItem
                        label="杂费实报金额："
                        :path="`reimburseDetailList[${index}].sundryFee`"
                        :rule="{
                        required: false,
                        trigger: ['input', 'blur'],
                        validator: (_: any, value: any) => renderMoneyMessageNoMust(_, value)
                      }"
                      >
                        <NInput
                          :allow-input="onlyFloatNumber"
                          placeholder="杂费实报金额"
                          class="commonWidth"
                          v-model:value="item.sundryFee"
                        />
                      </NFormItem>

                      <NFormItem
                        label="其他"
                        :show-feedback="false"
                        label-style="font-size: 20px;
                      font-weight: boldest;
                      height: 34px;
                      line-height: 34px;"
                        style="margin-left: -10px"
                      >
                        <div style="width: 240px"></div>
                      </NFormItem>

                      <NFormItem
                        label="事项："
                        :path="`reimburseDetailList[${index}].others`"
                        :rule="{
                          required: false,
                          trigger: ['input', 'blur']
                        }"
                      >
                        <NInput
                          :allow-input="stopNull"
                          placeholder="事项"
                          class="commonWidth"
                          v-model:value="item.others"
                        />
                      </NFormItem>

                      <NFormItem
                        label="金额(元)："
                        :path="`reimburseDetailList[${index}].othersFee`"
                        :rule="{
                        required: false,
                        trigger: ['input', 'blur'],
                        validator: (_: any, value: any) => renderMoneyMessageNoMust(_, value)
                      }"
                      >
                        <NInput
                          :allow-input="onlyFloatNumber"
                          placeholder="金额"
                          class="commonWidth"
                          v-model:value="item.othersFee"
                        />
                      </NFormItem>

                      <NFormItem
                        label="附件:"
                        :path="'reimburseDetailList[' + index + '].fileId'"
                        :rule="{
                          required: true,
                          message: '请上传附件',
                          trigger: ['change', 'blur']
                        }"
                      >
                        <VUpload
                          :file-list="item.fileList"
                          @getList="(e) => (formValue.reimburseDetailList[index].fileId = e)"
                        />
                      </NFormItem>

                      <NFormItem
                        label="合计金额(元):"
                        label-style="font-size: 18px;
                      font-weight: bolder;
                      height: 34px;
                      line-height: 34px;"
                      >
                        <div class="valueStyle">{{ item.amountSum }}</div>
                      </NFormItem>
                    </div>
                    <div style="width: 5%; margin-left: 5px">
                      <NButton
                        circle
                        type="error"
                        v-if="formValue.reimburseDetailList.length > 1"
                        size="tiny"
                        @click="deleteUser(index)"
                      >
                        <div style="height: 34px; line-height: 34px">—</div>
                      </NButton>
                    </div>
                  </div>
                </div>
              </NForm>
            </div>
          </div>
        </NSpin>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <div style="display: flex">
      <NSpace
        justify="start"
        style="flex: 0 0 42%"
      >
        <NButton
          style="width: 78px; color: #5fb17f"
          ghost
          @click="goBack"
        >
          <template #icon>
            <img
              :src="VBackImg"
              style="width: 25px; height: 25px"
            />
          </template>
          返回
        </NButton>
      </NSpace>
      <NSpace justify="center">
        <NButton
          type="primary"
          style="background-color: #5faab1"
          @click="confirm(1)"
          v-if="workFlowList?.length"
        >
          保存草稿
        </NButton>
        <NButton
          type="primary"
          @click="confirm(0)"
          v-if="workFlowList?.length"
        >
          提交申请
        </NButton>
      </NSpace>
    </div>
  </FixedAction>

  <NModal
    :auto-focus="false"
    v-model:show="contentVisible"
    @close="contentVisible = false"
  >
    <VDialogContent
      @close="contentVisible = false"
      @submit="submit"
      title="保存提示"
      :loading="loading"
    >
      <div style="width: 300px; height: 100px; text-align: center; line-height: 100px">
        {{ contentContent }}
      </div>
    </VDialogContent>
  </NModal>

  <NModal
    :auto-focus="false"
    v-model:show="modalVisible"
    @close="modalVisible = false"
  >
    <VScope
      @close="modalVisible = false"
      @scopeSubmit="getScopeList"
      :defaultList="scopeList"
      :flat="true"
    />
  </NModal>
</template>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.commonWidth {
  width: 280px;
}

.commonWidthA {
  width: 130px;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .topTitle {
    width: 100%;
    border-bottom: 1px solid #fff;
    padding: 15px 20px;
    margin-bottom: 20px;
    @include CommonFont;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 0 20px 0px;

    .content {
      display: flex;
      flex-wrap: wrap;
      padding: 20px 0 180px;
      background-color: #ebeceb;

      .scope {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .userBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 40px;
          background-color: #fff;
          border-radius: 4px;
          padding: 5px 10px;
          margin-bottom: 10px;
        }
      }
    }
  }
}

.content_cen {
  display: flex;
  flex-direction: column;
  margin-left: 35%;
}

.iconStyle {
  margin-right: 5px;
  color: #5fb17f;
}

.progress {
  display: flex;
  align-items: center;
  min-width: 400px;
  max-width: 800px;
  min-height: 50px;
  background-color: #d5e2d8;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 5px 15px;
  margin-left: 35%;
}

.progressHint {
  display: flex;
  min-width: 400px;
  max-width: 800px;
  padding: 5px 15px;
  margin-left: 35%;
}

.commonWidthB {
  width: 280px;
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}

.labelStyle {
  font-size: 18px;
  font-weight: bolder;
  height: 34px;
  line-height: 34px;
}

.valueStyle {
  width: 280px;
  height: 34px;
  line-height: 34px;
  background-color: #3b333310;
  font-size: 18px;
  font-weight: bolder;
  padding-left: 10px;
}

.titleStyle {
  margin-left: 90px;
  font-size: 16px;
  font-weight: bolder;
}
</style>
